<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/lib/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-header {
        text-align: center;
        font-family: "微软雅黑";
        background-color: yellow;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-footer {
        text-align: center;
        font-family: "微软雅黑";
        background-color:lightcoral;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        border-right: 1px solid gray;
        background-color:burlywood;
        color: #333;
        text-align: center;
        line-height: 630px;
    }

    .el-main {
        color: #333;
        text-align: center;
        line-height: 630px;
    }

    /*body > .el-container {*/
    /*    margin-bottom: 40px;*/
    /*}*/

    /*.el-container:nth-child(5) .el-aside,*/
    /*.el-container:nth-child(6) .el-aside {*/
    /*    line-height: 260px;*/
    /*}*/

    /*.el-container:nth-child(7) .el-aside {*/
    /*    line-height: 320px;*/
    /*}*/
</style>
<body>
<div class="outest" style="margin:0 auto; width: 80%; height:750px; margin-top:40px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <div id="app">
        <el-container>
            <el-header>
                服装库存管理系统
            </el-header>

            <el-container>
                <el-aside width="201px">
                        <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="1-1">显示所有用户</el-menu-item>
                            <el-menu-item index="1-2">增加一个用户</el-menu-item>
                            <el-menu-item index="1-2">删除一个用户</el-menu-item>
                            <el-menu-item index="1-2">修改用户数据</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">服装品类</span>
                            </template>
                            <el-menu-item index="2-1">显示所有服装品类</el-menu-item>
                            <el-menu-item index="2-2">增加服装</el-menu-item>
                            <el-menu-item index="2-2">修改服装品类</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-document"></i>
                                <span slot="title">仓库管理</span>
                            </template>
                            <el-menu-item index="3-1">仓库一</el-menu-item>
                            <el-menu-item index="3-2">仓库二</el-menu-item>
                            <el-menu-item index="3-2">仓库三</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main>
                    Main
                </el-main>

            </el-container>

            <el-footer>
                版权所有 &nbsp;&nbsp;&nbsp;&nbsp; <el-link type="info">www.huangyt.com</el-link>
            </el-footer>

        </el-container>
    </div>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            huang:"黄御挺",
        },
        methods:{
            handleOpen: function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose: function(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</body>
</html>